@import "../var";
@import "../mixin";

.simulatePage{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: $clr-bg;
  transform: translateX(100%);
  transition: all .3s;
  &.show {
    transform: translateX(0);
  }
}

.openPromotionPopUp, .goIntegralUsePage, .goCouponUsePage{
  .gzl-cell__ft{
    color: #FF5555
  }
}


//旅游积分卡使用模拟页
.simulateTravelIntegralPage{
  .gzl-section{
    .inputList{
      margin: px(12) 0;
      .gzl-cell{
        .gzl-label{
          margin-right: px(12)
        }
      }
    }
  }
  .integralUseInput{
    width: 100%;
    height: px(114);
    background-color: #fff;
    padding: px(20) px(16) 0 px(16);
    p{
      height: px(20);
      line-height: px(20);
      color: #333;
    }
    .gzl-flex{
      color: #FF5555;
      align-items: flex-end;
      span{
        font-size: px(24);
        margin-right: px(8);
      }
      .gzl-flex__item{
        font-size: px(40);
        input{
          border: none;
          display: block;
          width: 100%;
          color: #FF5555;
        }
      }
      em{
        color: #FFAB00;
      }
    }
  }
  .notEnoughTips{
    padding: px(8) px(16);  
    color:#FF5555;
    font-size: px(12);
  }
  .commitUse{
    padding: px(8) px(16);
  }
}

//积分使用模拟页
.integralUsePage{
  padding: px(16);
  .integralContent{
    width: 100%;
    height: 160px;
    background: url('../../img/cashier/integralUseBG.png');
    border-top-right-radius: px(8);
    border-top-left-radius: px(8);
    padding: px(20) px(20) 0 px(20);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: #fff;
    h1{
      font-size: px(18);
      font-weight: normal;
    }
    div{
      height: px(60);
      line-height: px(60);
      margin-bottom: px(15);
      font-size: px(50);
      font-weight: 600;
    }
    p{
      opacity: 0.8;
    }
  }
  .integralUse{
    width: 100%;
    height: 201px;
    background-color: #fff;
    border-bottom-right-radius: px(8);
    border-bottom-left-radius: px(8);
    padding: px(30) px(20) 0 px(20);
    .gzl-flex{
      position: relative;
      margin-bottom: px(10);
      .gzl-flex__item{
        margin-bottom: px(20);
        input{
          border: none;
          font-size: px(24);
          width: 100%;
        }
      }
      span{
        line-height: px(33);
        color: #FFAB00;
      }
      &:after{
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
        border-top: 1px solid #eee;
        -webkit-transform: scaleY(.5);
        -moz-transform: scaleY(.5);
        -ms-transform: scaleY(.5);
        -o-transform: scaleY(.5);
        transform: scaleY(.5);
      }
    }
  }
  .usingTips{
    color: #999;
    margin-bottom: px(30);
  }
}

//优惠券使用模拟页
.more-coupon {
  background-color: #fff;
  padding-top: px(10);
  .coupon-list {
    padding: 0 px(10);
    .coupon-list-item {
      background: $clr-active url(../../img/coupon/coupon-bg.png) no-repeat;
      background-size: 100%;
      color: $clr-white;
      &:not(:first-child) {
        margin-top: px(10);
      }
    }
    .coupon-item-hd {
      line-height: px(36);
      padding: 0 px(16);
      .contact-check{
        font-size: px(20);
      }
    }
    .coupon-item-bd {
      position: relative;
      padding: px(5) px(16) px(6);
      &:before,
      &:after {
        content: '';
        position: absolute;
        top: px(-6);
        width: px(12);
        height: px(12);
        border-radius: 50%;
        background-color: $clr-white;
      }
      &:before {
        left: px(-6);
      }
      &:after {
        right: px(-6);
      }
      .coupon-discount {
        position: relative;
        font-size: px(20);
        padding-right: px(70);
        span {
          font-size: px(40);
          margin-right: px(4);
          line-height: px(48);
          font-weight: 600;
        }
        em {
          font-size: px(14);
        }
        .receive-btn {
          position: absolute;
          bottom: px(4);
          right: 0;
        }
      }
      .receive-btn {
        width: px(60);
        height: px(20);
        line-height: px(20);
        background: rgba(255,255,255,.94);
        color: $clr-active;
        border-radius: px(10);
        font-size: px(10);
        text-align: center;
      }
      .coupon-date {
        font-size: px(12);
        margin-top: px(7);
      }
      .show-detail {
        position: absolute;
        right: 0;
        bottom: 0;
        width: px(80);
        height: px(32);
        line-height: px(32);
        padding-right: px(26);  
        font-size: px(12);
        text-align: right;
        &:after {
          position: absolute;
          top: 0;
          bottom: 0;
          right: px(16);
          margin: auto;
          @include arrow($color:$clr-white);
        }
      }
    }
    .coupon-item-dt {
      display: none;
      padding: px(16);
      background: #FFF9D6;
      color: $clr-g3;
      font-size: px(12);
      &.active{
        display: block;
      }
      li {
        &:first-child {
          font-weight: bold;
        }
        &:not(:first-child) {
          margin-top: px(8);
        }
      }
      label {
        width: px(60);
        margin-right: px(2);
      }
    }
  }
}

// 促销popUp使用
.promotionPopUp{
  .gzl-popup__hd{
    &::after{
      content: none;
    }
  }
  .promotionList{
    padding: 0 px(16);
    .promotionWay{
      margin-bottom: px(22);
      .title{
        font-size: px(16);
        color: #333;
        font-weight: 600;
        // margin-bottom: px(12);
      }
    }
    ul{
      .promitionSelectItem{
        line-height: px(20);
        .gzl-cell{
          padding: px(12) 0 px(8) 0;
          .gzl-cell__bd{
            em{
              color: #FFAB00;
              margin-left: px(12);
            }
          }
          .gzl-cell__ft{
            color: #FF5555;
          }
          .contact-check{
            font-size: px(20);
            color: #999;
            padding-right: px(12);
          }
        }
        &:last-child{
          .gzl-cell{
            &::after{
              content: none;
            }
          }
        }
      }
      .rulesDetail{
        display: none;
        &.active{
          display: block;
        }
        p{
          padding: px(8);
          background-color: #f5f5f5;
          font-size: px(12);
          line-height: px(17);
          color: #666666;
        }
      }
    }
  }
}


// 邮轮常见问题模拟页
// 常见问题
.cruiseCommonQustionPage{
  z-index: 9;
  padding: px(10) px(16);
  .qaList{
    .qaItem{
      .gzl-flex__item{
        span{
          padding: px(12) px(12);
          display: inline-block;
          background-color: #fff;
        }
      }
      .question_bd{
        margin-bottom: px(10);
        .question_Circle{
          width: px(32);
          height: px(32);
          background-color: #F9355C;
          text-align: center;
          line-height: px(32);
          font-size: px(18);
          border-radius: px(16) 0 px(16) px(16);
          color: #fff;
          margin-right: px(6);
          font-weight: 600;
        }
        .question_Detail{
          span{
            border-radius: 0 px(20) px(20) px(20);
            font-weight: 600;
          }
        }
      }
      .answer_bd{
        margin-bottom: px(20);
        .answer_Circle{
          width: px(32);
          height: px(32);
          background-color: #FFD800;
          text-align: center;
          line-height: px(32);
          font-size: px(18);
          border-radius: 0 px(16) px(16) px(16);
          color: #fff;
          margin-left: px(6);
          font-weight: 600;
        }
        .answer_Detail{
          span{
            border-radius: px(20) 0 px(20) px(20);
          }
        }
      }
    }
  }
}

/* 邮轮舱房选择页 -房间 选择*/
.cruiseChooseMen-wrap{
  .chooseTips{
    padding: 0 .16rem;
    font-size: px(12);
    color: #999;
    margin-bottom: px(2);
    span{
      color: #FF5555;
    }
  }
  .gzl-cell{
    &::after{
      content: none;
    }
  }
  .gzl-count{
    .roomNum{
      display: block;
      width: 100%;
      text-align: center; 
    }
  }
  .cruiseMember{
    padding: .06rem .16rem;
    .gzl-cell__ft{
      color: #FF5555;
      font-size: px(14);
    }
  }
}

/* 邮轮舱房选择页 -房间具体查看*/